<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../static/css/bootstrap.css" >
    <link rel="stylesheet" href="../static/css/style-index.css">
    <title>员工表</title>
    <script src="../static/js/jquery-3.6.0.js"></script>
    <script>

        $(document).ready(function () {
            $.ajax({
                url: "findallmeetingroom",
                type: "post",
                success: function (result) {

                    var m="<tr>";
                    $.each(result, function(i,n) {
                        // console.log(n);

                        m+="<td>"+n["meetingroom"]+"</td>"+"<td>"+n["state"]+"</td>"+"<td>"+n["information"]+"</td>" +
                            "<td><input type='text' placeholder='请输入预定信息'></td>" +
                            "<td><button class=\"btn  btn-light btn-block \">预定</button></td>";
                        m+="</tr>"+"<tr>";
                    });
                    m+="</tr>";
                    $(".information").show().append(m);
                    $('button').eq(0).click(function (){
                        $.ajax({
                            type: 'POST',
                            url: "updatemeetingroom",
                            data: {"meetingroom": "406会议室", "information": $('input').eq(0).val()},
                            success: function (r){
                                window.location.reload();
                            }
                        })
                    })
                    $('button').eq(1).click(function (){
                        $.ajax({
                            type: 'POST',
                            url: "updatemeetingroom",
                            data: {"meetingroom": "610会议室", "information": $('input').eq(1).val()},
                            success: function (r){
                                window.location.reload();
                            }
                        })
                    })
                    $('button').eq(2).click(function (){
                        $.ajax({
                            type: 'POST',
                            url: "updatemeetingroom",
                            data: {"meetingroom": "学院楼四楼会议室", "information": $('input').eq(2).val()},
                            success: function (r){
                                window.location.reload();
                            }
                        })
                    })

                }

            });

        });
    </script>
</head>
<body>

<nav class="navbar navbar-dark col-lg-12 bg-dark ">
    <div class="toggle float-left" onclick="toggleMenu()">
        <img src="../static/img/menu.jpg" width="36" height="36">
<!--        <button  class="btn btn-light">菜单</button>-->
    </div>



    <div class="col-lg-1 " >
        <a class="navbar-brand float-left">我执为您服务</a>
    </div>

    <div class="navbar-brand col-lg-10 text-center ">
        <span >程序，让生活更美好。</span>
    </div>

<!--    <ul class="navbar-nav px-3 col-lg-1 text-center">-->
<!--        <li class="nav-item text-nowrap">-->
<!--            <a class="nav-link" >username</a>-->
<!--        </li>-->
<!--    </ul>-->
</nav>

<div  class="navigation ">
    <ul>
        <li >
            <a  href = "resume">
                <span class="icon"><i class="fa fa-comment" aria-hidden="true"></i></span>
                <span class="title">我的简历</span>
            </a>
        </li>
        <li>
            <a href = "main" >
                <span class="icon"><i class="fa fa-home" aria-hidden="true" ></i></span>
                <span class="title" >会议室预约</span>
            </a>
        </li>
        <li >
            <a href = "usercenter">
                <span class="icon"><i class="fa fa-user" aria-hidden="true"></i></span>
                <span class="title">用户中心</span>
            </a>
        </li>

    </ul>
</div>



<div class="container-fluid">
    <table class="table  table-striped text-center information">
        <tr>
            <th width="20%" >会议室</th>
            <th width="20%" >使用状态</th>
            <th width="20%" >预定信息</th>
            <th width="20%" >请输入预定信息</th>
            <th width="20%" >预定</th>
        </tr>

    </table>

</div>








<script type="text/javascript">
    function toggleMenu(){
        let navigation = document.querySelector('.navigation');
        let toggle = document.querySelector('.toggle');
        navigation.classList.toggle('active');
        toggle.classList.toggle('active');
    }
</script>

</body>
</html>